<template>
  <el-dialog :visible.sync="dialogTableVisible"
             v-if="dialogTableVisible"
             @open="open"
             @close="close"
             title="选择类目"
             width="70%"
             append-to-body
             destroy-on-close>
    <div class="ckeck_box">
      <div class="onestair item">
        <div class="title">一级分类:</div>
        <div class="content">
          <span class="context"
                v-for="(item,index) in productAll"
                :key="index"
                :class="{active:currentIndexone == index}"
                @click="oneClassClick(index,item)">{{item.label}}</span>
        </div>
      </div>
      <div class="twostair item">
        <div class="title">二级分类:</div>
        <div class="content">
          <span class="context"
                v-for="(item,index) in productTwo"
                :key="index"
                :class="{active:currentIndextwo == index}"
                @click="twoClassClick(index,item)">{{item.label}}</span>
        </div>
      </div>
      <div class="threestair item">
        <div class="title">三级分类:</div>
        <div class="content">
          <span class="context"
                v-for="(item,index) in productThree"
                :key="index"
                :id="item.disabled"
                :class="{active:currentIndexthree == index}"
                @click="threeClassClick(index,item)">{{item.label}}</span>
        </div>
      </div>
    </div>
    <template slot="footer">
      <el-button type="primary"
                 size="mini"
                 @click="closeDialog">下一步</el-button>
    </template>
  </el-dialog>
</template>
<script>
import { getList } from '@/api/base/goods/addGoods'
export default {
  name: 'changegoodsclass',
  props: {
    isPublish: {
      type: Boolean,
      default () {
        return true
      }
    },
    isRedact: {
      type: Boolean,
      default () {
        return false
      },
    }
  },
  data () {
    return {
      productAll: [],//一级分类数据
      productTwo: [],//二级分类数据
      productThree: [],//三级分类数据
      currentIndexone: null,
      currentIndextwo: null,
      currentIndexthree: null,
      changeGoodsClassname: [],//选中的商品类目
      dialogTableVisible: false,
    }
  },
  created () {
    if (this.isPublish || this.isRedact) this.getList();
  },
  methods: {
    open () {
      this.dialogTableVisible = true;
    },
    close () {
      this.dialogTableVisible = false;
    },
    oneClassClick (index, item) {
      this.currentIndextwo = null;
      this.currentIndexthree = null;
      this.currentIndexone = index;
      this.productTwo = item.children;
      this.productThree = [];
    },
    twoClassClick (index, item) {
      this.currentIndextwo = index;
      this.productThree = item.children;
    },
    threeClassClick (index,item) {
      console.log(item);
      this.currentIndexthree = index;
    },
    getList () {
      getList().then(res => {
        if (res.data.code == 200) {
          //设置默认选中类目
          this.productAll = res.data.data;
        }else{
          this.$message.error(res.data.message);
        }
      })
    },
    closeDialog () {
      if(this.currentIndexone != null && this.currentIndextwo  != null  && this.currentIndexthree != null){
        this.$emit('callback', {
          str: this.getCallData(),
          code: this.productThree[this.currentIndexthree].value,
          goodsClassSpecIds: [this.productAll[this.currentIndexone].value,
            this.productTwo[this.currentIndextwo].value,
            this.productThree[this.currentIndexthree].value]
        })
        this.close();
      }else{
        this.$message({
          message: '只能三级分类才能发布商品',
          type: 'warning'
        })
      }

    },
    //通过index找到回显的数据
    getCallData () {
      return `${this.productAll[this.currentIndexone].label}>>${this.productTwo[this.currentIndextwo].label}>>${this.productThree[this.currentIndexthree].label}`
    },
  },
}
</script>
<style lang="scss" scoped>
.ckeck_box {
  width: 100%;
  height: auto;
  padding: 0 20px;
  box-sizing: border-box;
  color: #606266;
  .item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 0 10px;
    border-bottom: 1px dashed #e8e8e8;
    box-sizing: border-box;
  }
  .title {
    padding: 0 20px;
    width: 120px;
    font-size: 14px;
    text-align: right;
    display: inline-block;
    box-sizing: border-box;
  }
  .content {
    box-sizing: border-box;
    flex: 1;
  }
  .context {
    padding: 3px 12px;
    margin-right: 24px;
    margin-bottom: 12px;
    font-size: 14px;
    white-space: nowrap;
    display: inline-block;
    cursor: pointer;
  }
  #true{
    pointer-events:none;
    background-color: #909399;
  }
  .active {
    color: #fff;
    background-color: #1890ff;
    border-radius: 5px;
  }
}
</style>